<template>
	<view class="content">
		<mytabbar :current-page="3"></mytabbar>
		<scroll-view scroll-y="true" refresher-enabled="true" @refresherrefresh="onRefresh"
			:refresher-triggered="triggered">
			<view class="clists" v-if="!isShow">
				<u-swipe-action>
					<u-swipe-action-item @click="del" :name="item.userId" :options="options1"
						v-for="(item,index) in chatLists" :key="item.userId">
						<view class="swipe-action u-border-top u-border-bottom chat"
							@click="goToChat(item.userId,item.username,item.avatar)">
							<image class="imgg" :wx-if="ImgUrl" :src="ImgUrl+item.avatar" mode="aspectFill"></image>
							<view class="name">{{item.username}}</view>
							<view class="badge" v-if="item.count">
								<u-badge numberType="overflow" :type="type" max="99" :value="item.count"></u-badge>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>

				<!-- <view class="chat" v-for="item,indx in chatLists" :key="item.userId"
					@click="goToChat(item.userId,item.username,item.avatar)">
					<image class="imgg" :wx-if="ImgUrl" :src="ImgUrl+item.avatar" mode="aspectFit"></image>
					<view class="name">{{item.username}}</view>
					<view class="badge" v-if="item.count">
						<u-badge numberType="overflow" :type="type" max="99" :value="item.count"></u-badge>
					</view>
				</view> -->
			</view>
			<view style="height:120upx;"></view>
		</scroll-view>
		<u-empty :show="isShow" mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png">
		</u-empty>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				BaseUrl: '',
				ImgUrl: '',
				type: 'error',
				chatLists: [],
				isShow: true,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				triggered: false
			}
		},
		onLoad() {
			setInterval(() => {
				this.init()
			}, 10000)
		},
		onShow() {
			this.init()
		},
		onShareTimeline() {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		onShareAppMessage: function(e) {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		methods: {
			async init() {
				let BaseUrl = getApp().globalData.BaseUrl
				let ImgUrl = getApp().globalData.ImgUrl
				this.BaseUrl = BaseUrl
				this.ImgUrl = ImgUrl
				let token = uni.getStorageSync('token')
				await uni.request({
					url: BaseUrl + '/chat/indexChat',
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: JSON.stringify({
						page: 1,
						limit: 1000
					}),
					success: (res) => {
						// console.log('initsuccess')
						this.chatLists = res.data.data
						if(this.chatLists){
							if (this.chatLists.length==0) {
								this.isShow = true
							}else{
								this.isShow = false
							}
						}
						
					}
				})
			},
			goToChat(toId, toName, toAvatar) {
				uni.navigateTo({
					url: './chatDetail?toId=' + toId + '&toName=' + toName + '&toAvatar=' + toAvatar
				})
			},
			async del(e) {
				// // console.log(e.name)
				let token = uni.getStorageSync('token')
				await uni.request({
					url: this.BaseUrl + '/chat/cancelShow',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						userId: e.name
					},
					success: (res) => {
						if(res.data.code===200){
							this.chatLists.forEach((item,index)=>{
								if(item.userId==e.name){
									this.chatLists.splice(index,1)
								}
							})
						}
					}
				})
			},
			onRefresh() {
				this.triggered = true
				this.init()
				setTimeout(() => {
					this.triggered = false
				}, 800)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.content {
		height: 100%;

		.clists {
			height: 100%;
			.chat {
				// z-index: 1;
				height: 120upx;
				width: 100%;
				border-bottom: 1upx #dcdcdc solid;
				background-color: #fff;
				display: flex;
				align-items: center;
				position: relative;

				.imgg {
					margin-left: 30upx;
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					box-shadow: 0 0 5upx #888;
				}

				.name {
					position: relative;
					top: -20upx;
					left: 30upx;
					font-size: 34upx;
					font-weight: 600;
					color: #000;
				}

				// .mes {
				// 	position: relative;
				// 	top: 15upx;
				// 	left: -60upx;
				// 	font-size: 26upx;
				// 	color: #4b4b4b;
				// }

				.badge {
					position: absolute;
					top: 20upx;
					left: 670upx;
				}
			}
		}
	}
</style>
